<!DOCTYPE html>
<html>

<head>
    <title>test</title>
    <meta charset="UTF-8">

    <script src="../../dist/avalon.js"></script>
</head>

<body>
    <script>
            function heredoc(fn) {
                return fn.toString().replace(/^[^\/]+\/\*!?\s?/, '').
                     replace(/\*\/[^\/]+$/, '').trim().replace(/>\s*</g, '><')
            }
            function expect(a){
                return {
                    to: {
                        equal:function(b){
                  console.log(a,b,a===b)
                        }
                    }
                }
            }
            var vm
         
            var div = document.createElement('div')
            var body = document.body
            body.appendChild(div)
            div.innerHTML = heredoc(function () {
            /*
            <div ms-controller='for0' >
            <ul>
             <li ms-for='($index, el) in @array | limitBy(4)'>{{$index}}::{{el}}</li>
             </ul>
            <ol>
             <li ms-for='($key, $val) in @object'>{{$key}}::{{$val}}</li>
             </ol>
             <!--ms-for: ($index,el) in @array   -->
             <p>{{el}}</p>
             <!--ms-for-end:-->
      
            </div>
            */
        })
                  body.appendChild(div)
                    vm = avalon.define({
                    $id: 'for0',
                            array: [1, 2, 3, 4, 5],
                            object: {
                            a: 11,
                            b: 22,
                            c: 33,
                            d: 44,
                            e: 55
                            }
                    })
                    avalon.scan(div)
                    setTimeout(function () {
                    var lis = div.getElementsByTagName('li')
                var ps = div.getElementsByTagName('p')
                expect(lis[0].innerHTML).to.equal('0::1')
                expect(lis[1].innerHTML).to.equal('1::2')
                expect(lis[2].innerHTML).to.equal('2::3')
                expect(lis[3].innerHTML).to.equal('3::4')
                expect(lis[4].innerHTML).to.equal('a::11')
                expect(lis[5].innerHTML).to.equal('b::22')
                expect(lis[6].innerHTML).to.equal('c::33')
                expect(lis[7].innerHTML).to.equal('d::44')
                expect(lis[8].innerHTML).to.equal('e::55')
                expect(ps[0].innerHTML).to.equal('1')
                expect(ps[1].innerHTML).to.equal('2')
                expect(ps[2].innerHTML).to.equal('3')
                expect(ps[3].innerHTML).to.equal('4')
                expect(ps[4].innerHTML).to.equal('5')
                vm.array.reverse()
                vm.array.unshift(9)
                setTimeout(function () {
                    expect(lis[0].innerHTML).to.equal('0::9')
                    expect(lis[1].innerHTML).to.equal('1::5')
                    expect(lis[2].innerHTML).to.equal('2::4')
                    expect(lis[3].innerHTML).to.equal('3::3')
                    expect(ps[0].innerHTML).to.equal('9')
                    expect(ps[1].innerHTML).to.equal('5')
                    expect(ps[2].innerHTML).to.equal('4')
                    expect(ps[3].innerHTML).to.equal('3')
                    expect(ps[4].innerHTML).to.equal('2')
                },300)
            },300)
          
        </script>
</body>

</html>